<!DOCTYPE html>
<html>

<head>
    <!-- span测试 -->
    <meta charset="utf-8">
    <title>span测试</title>


    <style>

        .box{
            font-size: 20px;
            line-height: 20px;
            color: #ffffff80;
            background-color: darkmagenta;
            color: #ffffff80;
            margin-bottom: 20px;
        }


        .tag{
            /* 行内元素加背景色，高度取决于不同字体，不好控制，可以使用行内块元素 */

            background-color: #9e9e9eb3;
            margin-right: 5px;
        }
    </style>

    <script>
        function print(a){
            console.log(a)
        }
    </script>

</head>

<body>
    <input id="xxx" onchange="print('1')" />
    <div class="box">
        <span class="tag">中国测试</span>
        <span class="tag" style="font-family: Microsoft YaHei UI;">中国</span>
        <span class="tag" style="font-family: Helvetica;">中国</span>
        <span class="tag" style="font-family: 黑体;">中国</span>
        <span class="tag" style="font-family: 楷体;">中国</span>
        <span class="tag" style="font-family: 宋体;">中国</span>
        <span class="tag" style="font-family: 仿宋;">中国</span>
        <span class="tag" style="font-family: Segoe Print;">中国</span>
    </div>
    <div class="box">
        <span class="tag">abc</span>
        <span class="tag" style="font-family: Microsoft YaHei UI;">abc</span>
        <span class="tag" style="font-family: Helvetica;">abc</span>
        <span class="tag" style="font-family: 黑体;">abc</span>
        <span class="tag" style="font-family: 楷体;">abc</span>
        <span class="tag" style="font-family: 宋体;">abc</span>
        <span class="tag" style="font-family: 仿宋;">abc</span>
        <span class="tag" style="font-family: Segoe Print;">abcabx</span>
    </div>

</body>

</html>